<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <role-search @search="reload"  />
    <!-- 数据表格 -->
    <el-card shadow="never">
      <ele-pro-table
        ref="table"  row-key="id" :columns="columns" :datasource="datasource" 
        :need-page="true"  @done="onDone"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit({},'1')"
          >
            添加
          </el-button>
          <el-button
            size="small"
            icon="el-icon-upload2"
            class="ele-btn-icon"
            @click="reportexcel"
          >
            导出
          </el-button>
        </template>
        <!-- 标题列 -->
        <template slot="title" slot-scope="{ row }">
          <i :class="row.icon"></i> {{ row.title }}
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link type="primary" :underline="false" icon="el-icon-view"  @click="openEdit(row,'3')">详情</el-link>
          <el-link v-if="row.isSys!=1" type="primary" v-any-role="['JS01','JS00']" :underline="false"  icon="el-icon-edit"  @click="openEdit(row,'2')" >修改</el-link>
          <el-link type="warning" v-any-role="['JS01','JS00']" :underline="false"  icon="el-icon-finished" @click="openAuth(row)" >分配权限</el-link>
          <el-popconfirm v-if="row.isSys!=1" class="ele-action" title="确定要删除吗？" @confirm="remove(row)" >
            <el-link type="danger" slot="reference" v-any-role="['JS01','JS00']"  :underline="false" icon="el-icon-delete" >删除</el-link>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <role-edit :data="current" :visible.sync="showEdit" @done="reload" :btnindex="btnindex"/>
    <!-- 编辑角色权限弹窗 -->
    <role-auth :data="current" :visible.sync="showAuth" />
    <!-- 导出数据 -->
    <ExportDialog ref="ExportDialog"></ExportDialog>
  </div>
</template>

<script>
  import RoleEdit from './components/role-edit';
  import RoleAuth from './components/role-auth';
  import RoleSearch from './components/role-search';
  import ExportDialog from '@/components/Excel/ExportDialog'
  import { AllRoles,RemoveRole } from '@/api/usermanager/rolemanager';
  export default {
    name: 'UserRole',
    components: { RoleEdit,RoleSearch,ExportDialog,RoleAuth},
    data() {
      return {
        // 表格列配置
        columns: [
          {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
          {prop: 'name', label: '角色名称', showOverflowTooltip: true, sortable: 'name',},
          {prop: 'code', label: '角色代码', showOverflowTooltip: true, sortable: 'code',},
          {prop: 'isSysDesc', label: '系统角色', showOverflowTooltip: true, align: 'left',sortable: 'isSys',},
          {prop: 'statusDesc', label: '状态', showOverflowTooltip: true, align: 'left',sortable: 'status',},
          {prop: 'remark', label: '描述', showOverflowTooltip: true, minWidth: 100,sortable: 'remark',},
          {prop: 'createUserName', label: '创建人', showOverflowTooltip: true, align: 'left',sortable: 'createUserName',},
          {
            prop: 'createDate', label: '创建时间', showOverflowTooltip: true,  align: 'left',sortable: 'createDate',
            formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue);}
          },
          {columnKey: 'action', label: '操作', width: 230, align: 'center', resizable: false,slot: 'action', hideInSetting: true, showOverflowTooltip: true}
        ],
        //操作按钮索引
        btnindex: '1',
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示权限弹窗
        showAuth: false,
        // 全部角色数据
        roleList: [],
        // 导出列
        exportList: [
          { name: "角色名称", keys: "name", status: true },
          { name: "角色代码", keys: "code", status: true },
          { name: "系统角色", keys: "isSysDesc", status: true },
          { name: "状态", keys: "statusDesc", status: true },
          { name: "描述", keys: "remark", status: true },
          { name: "创建人", keys: "createUserName", status: true },
          { name: "创建时间", keys: "createDate", status: true },
        ]
      };
    },
    methods: {
      /* 表格数据源 */
      async datasource(params) {
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        let roles = await AllRoles(params.where);

        return{ list:roles.items,count :roles.totalrecords}
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {
        // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
        if(this.current) {
          Object.assign(this.current, data);
        }
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where: where });
      },
      
      /**
       * 显示编辑
       * @param row 当前行对像
       */
      openEdit(row,index) {
        this.current = row;
        this.showEdit = true;
        this.btnindex = index;
      },
       /* 显示分配权限 */
      openAuth(row) {
        this.current = row;
        this.showAuth = true;
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        RemoveRole(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 导出 */
      reportexcel(pams) {
        //初始化参数
        let params = {
          pagesize: 0,
          pageindex: 1,
          conditions: [],
          orderBys: [{ sort: "createDate", order: 1, }],
        };
        //加载进度条
        const loading = this.$loading({ lock: true });
        //重新请求查询
        this.$refs.table.doRequest(({ where }) => {
        if(where){
          params.orderBys = where.orderBys;
          params.pageindex = where.pageindex;
          params.conditions = where.conditions;
        }
        //查询数据
        AllRoles(params)
          .then((data) => {
            loading.close();
            this.$refs.ExportDialog.showEdits = true
            this.$refs.ExportDialog.checkList = this.exportList
            this.$refs.ExportDialog.titleName = "角色列表"
            this.$refs.ExportDialog.dataList = data;
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
        });
      },
    }
  };
</script>
